<template>
  <el-dialog :model-value="dialogVisible" :width="400">
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
    >
      <el-form-item label="编号">
        <el-input v-model="formLabelAlign.goodsId" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input v-model="formLabelAlign.goodsName" />
      </el-form-item>
      <el-form-item label="销售价">
        <el-input v-model="formLabelAlign.goodsSale" />
      </el-form-item>
      <el-form-item label="运费">
        <el-input v-model="formLabelAlign.code" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs, watch } from "vue";
import Mock from "@/mock/Data";

export default {
  props: ["resQuery"],

  setup(props: any, { emit }: any) {
    const { resQuery } = toRefs(props);
    watch(resQuery, async (val) => {
      const res: any = await Mock.AllitemsData2({ id: val });
      formLabelAlign.goodsId = res.result[0].goodsId;
      formLabelAlign.name = res.result[0].name;
      formLabelAlign.goodsName = res.result[0].goodsName;
      formLabelAlign.goodsSale = res.result[0].goodsSale;
      formLabelAlign.code = res.result[0].code;
    });

    const labelPosition = ref("right");
    // 准备接收的值
    const formLabelAlign: any = reactive({
      // id
      goodsId: "",
      // 名字
      name: "",
      // 供应商
      goodsName: "",
      // 价格
      code: "",
      // 运费
      goodsSale: "",
    });

    const handleClose = () => {
      emit("add");
    };
    const handleConfirm = async () => {
      let addAce: any = await Mock.ModifyData(formLabelAlign);
      emit("add", addAce);
    };
    return {
      handleClose,
      handleConfirm,
      labelPosition,
      formLabelAlign,
    };
  },
};
</script>

<style lang="less" scoped></style>
